<template>
  <div class="footermi">
    <div ref="server" class="server">
      <ul>
        <li v-for="(item, index) of serveList" :key="index">
          <img :src="item.link" alt="" /><span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="footer">
      <div class="footer-logo">
        <img src="img/logo-footer.png" alt="" />
        <p>小米商城</p>
      </div>
      <div class="footer-link">
        <a href="/#/" v-for="(item, index) of footerLink" :key="index">{{
          item.dec
        }}</a>
      </div>
      <div class="copyright">
        Copyright ©2019 <span>mi.futurefe.com</span> All Rights Reserved.
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    serve: { type: Boolean, default: true },
  },
  data() {
    return {
      serveList: [
        { name: '预约维修服务', link: 'img/icon-setting.png' },
        { name: '7天无理由退货', link: 'img/icon-7day.png' },
        { name: '15天免费换货', link: 'img/icon-15day.png' },
        { name: '满150元包邮', link: 'img/icon-post.png' },
      ],
      footerLink: [
        { dec: '回到主页', link: 'javascript:;' },
        { dec: '回到主页', link: 'javascript:;' },
        { dec: '回到主页', link: 'javascript:;' },
        { dec: '回到主页', link: 'javascript:;' },
      ],
    }
  },
  mounted() {
    // console.log(this.serve)
    if (!this.serve) {
      this.$refs.server.style.display = 'none'
    }
  },
}
</script>
<style lang="scss">
.footermi {
  width: 100%;
  .server {
    width: 100%;
    padding: 33px 0;
    ul {
      margin: auto;
      display: flex;
      width: 1226px;
      color: #666666;
      li {
        box-sizing: border-box;
        width: 25%;
        font-size: 16px;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }
        &:nth-child(n + 2) {
          border-left: 1px solid #e5e5e5;
        }
      }
    }
  }
  .footer {
    font-size: 16px;
    color: #999999;
    border-top: 4px solid #ff6600;
    height: 234px;
    background-color: #333333;
    .footer-logo {
      margin-top: 46px;
      margin-bottom: 31px;
      img {
        width: 53px;
        height: 36px;
        margin-bottom: 13px;
      }
    }
    .footer-link {
      a {
        color: #999999;
        padding: 0 10px;
        &:nth-child(n + 2) {
          border-left: 1px solid #999999;
        }
      }
      margin-bottom: 13px;
    }
    .copyright {
      span {
        color: #ff6600;
      }
    }
  }
}
</style>